import React, {Component, lazy, Suspense, Fragment} from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import Proptypes from 'prop-types';
import {
    NavBar,
    TabBar
} from 'antd-mobile';

import './main.less';
import icons from '@/assets/js/icons';


import Loading from '@/components/Loading/Loading';
const Bossinfo = lazy(() => import('@/components/Bossinfo') );
const Workerinfo = lazy(() => import('@/components/Workerinfo') );
const Talent = lazy(() => import('@/components/Talent') );
const Job = lazy(() => import('@/components/Job') );
const Msg = lazy(() => import('@/components/Msg') );
const My = lazy(() => import('@/components/My') );
const Nothing = lazy(() => import('@/containers/nothing/Nothing') );

const routes = [
    {
        path:'/home/bossinfo',
        component: Bossinfo,
        title:'完善老板信息',
        type:1
    }, {
        path:'/home/workerinfo',
        component: Workerinfo,
        title:'完善牛人信息',
        type:0
    }, {
        path:'/home/talent',
        component: Talent,
        title:'牛人',
        type:1
    }, {
        path:'/home/job',
        component: Job,
        title:'职位',
        type:0
    }, {
        path:'/home/msg',
        component: Msg,
        title:'消息',
        type:2
    }, {
        path:'/home/my',
        component: My,
        title:'我的',
        type:2
    }
]

class Main extends Component {

    constructor(props) {
        super(props);
        this.state = {
            firstPage:this.props.user.type==='0'?{
                title: '职位',
                key: 'job',
                path: '/home/job',
                icon:icons.job1,
                selIcon:icons.job2,
            }:{
                title: '牛人',
                key: 'talent',
                path: '/home/talent',
                icon:icons.talent1,
                selIcon:icons.talent2,
            },
            routes:this.props.user.type==='0'?routes.filter(d=>d.type!==1):routes.filter(d=>d.type!==0)
        }
    }
    static propTypes = {
        user: Proptypes.object.isRequired
    }

    componentDidMount() {

        setTimeout(()=>{
            let {user:{user, type}, history} = this.props;
            if(user === '' && type === '') {
                history.replace('/login')
            }
        },300)

    }

    render() {

        let {location:{pathname}, user:{type}} = this.props;
        let {title, key, path, icon, selIcon} = this.state.firstPage;
        const data = [
            {
                title,
                key,
                icon:{uri: icon},
                selectedIcon:{uri: selIcon},
                selected:pathname === path,
                onPress:() => {

                    this.props.history.push(path)
                }
            },
            {
                title:'消息',
                key:'msg',
                icon:{uri: icons.msg1},
                selectedIcon:{uri: icons.msg2},
                selected:pathname === '/home/msg',
                onPress:() => {

                    this.props.history.push('/home/msg')
                }
            },
            {
                title:'我的',
                key:'my',
                icon:{uri: icons.my1},
                selectedIcon:{uri: icons.my2},
                selected:pathname === '/home/my',
                onPress:() => {
                    this.props.history.push('/home/my')
                }
            }
        ];

        let navtitle = this.state.routes.find(d=>d.path===pathname);
        navtitle = navtitle?navtitle.title:'404';
        return (
            <div className="Main">
                {/* 导航栏 */}
                <NavBar
                    mode="dark"
                >{
                    navtitle
                }</NavBar>

                {/* 标签栏 */}
                <div className="main-container">
                    <div className="tabbar-content">
                        <Suspense fallback={<Loading />}>
                            <Switch>
                                <Redirect exact from="/home" to={path} />
                                {
                                    this.state.routes.map(d=>(
                                        <Route key={d.title} path={d.path} component={d.component}/>
                                    ))
                                }
                                <Route component={Nothing}/>
                            </Switch>
                        </Suspense>
                    </div>
                    <TabBar
                        unselectedTintColor="#bfbfbf"
                        tintColor="#2c2c2c"
                        barTintColor="white"
                        hidden={pathname==='/home/bossinfo'||pathname==='/home/workerinfo'}
                        noRenderContent={true}
                    >
                        {
                            data.map(d=>(
                                <TabBar.Item
                                    title={d.title}
                                    key={d.key}
                                    icon={d.icon}
                                    selectedIcon={d.selectedIcon}
                                    selected={d.selected}
                                    onPress={d.onPress}
                                >
                                </TabBar.Item>
                            ))
                        }

                    </TabBar>
                </div>
            </div>
        );
    }
}

export default connect(
    (state)=>({
        user: state.user
    }),
    {}
)(Main)